<template>
  <div>
    <div class="alarm" v-show="alarmBox">
      <div class="ala_close pbtn" @click="alarmBox = false"></div>
      <span class="ala_title">入侵告警！</span>
      <ul>
        <li>
          <i></i>
          <p style="
              font-family: ShiShangZhongHeiJianTi;
              font-weight: 400;
              font-size: 24px;
              color: #636363;
            ">
            所在区域:
          </p>
          <p style="
              font-family: ShiShangZhongHeiJianTi;
              font-weight: 400;
              font-size: 24px;
              color: #f1774d;
            ">
            宁波市城管局/周界
          </p>
        </li>
        <li>
          <i></i>
          <p style="
              font-family: ShiShangZhongHeiJianTi;
              font-weight: 400;
              font-size: 24px;
              color: #636363;
            ">
            事件源:
          </p>
          <p style="
              font-family: ShiShangZhongHeiJianTi;
              font-weight: 400;
              font-size: 24px;
              color: #f1774d;
            ">
            {{ alarmBox ? websocketData.params.events[0].srcName : '无' }}
          </p>
        </li>
        <li>
          <i></i>
          <p style="
              font-family: ShiShangZhongHeiJianTi;
              font-weight: 400;
              font-size: 24px;
              color: #636363;
            ">
            事件类型:
          </p>
          <p style="
              font-family: ShiShangZhongHeiJianTi;
              font-weight: 400;
              font-size: 24px;
              color: #f1774d;
            ">
            {{ alarmBox ? eventTypeForm[websocketData.params.events[0].eventType] : '无' }}
          </p>
        </li>
        <li>
          <i></i>
          <p style="
              font-family: ShiShangZhongHeiJianTi;
              font-weight: 400;
              font-size: 24px;
              color: #636363;
            ">
            发生时间:
          </p>
          <p style="
              font-family: ShiShangZhongHeiJianTi;
              font-weight: 400;
              font-size: 24px;
              color: #f1774d;
            ">
            {{ alarmBox ? websocketData.params.events[0].happenTime.split('+')[0] : '无' }}
          </p>
        </li>
      </ul>
    </div>
    <div class="settingMb" v-show="_showPz">
      <div class="settingMb-title">设置面板</div>
      <div class="settingMb-menu">
        <span :style="[
          'background-image: ' + (index == settingIndex ? 'url(/imgs/menu/boxBg-1-2.png)' : '')
        ]" class="pbtn" v-for="(item, index) in settingForm" @click="clickSetting(item, index)">
          <p :style="[{ color: index == settingIndex ? '#fff' : '#636363' }]">
            {{ item.name }}
          </p>
        </span>
      </div>
      <div class="settingMb-box">
        <div class="settingMb-HZ" v-show="settingIndex == 0">
          <el-radio-group v-model="radio">
            <el-radio :value="3">低画质</el-radio>
            <el-radio :value="6">中画质</el-radio>
            <el-radio :value="9">高画质</el-radio>
          </el-radio-group>
        </div>
        <div v-show="settingIndex == 1">
          <div class="settingMb-box-title">账号：nbcgda</div>
          <div class="settingMb-box-btn pbtn" @click="routerToMh">
            <p>返回门户</p>
          </div>
          <div class="settingMb-box-btn pbtn" @click="editLogin">
            <p>退出登录</p>
          </div>
        </div>
      </div>
    </div>
    <div class="menuBox">
      <div class="bg_zhanshi" v-if="_showZS">
        <div class="zsBox pbtn" v-for="(item, index) in zhanshiList" @click="clickZsMenu(item, index)">
          <i :style="[{ backgroundImage: `url(/imgs/menu/${item.name}.png)` }]"></i>
          <p>{{ item.name }}</p>
        </div>
      </div>

      <div class="mapBox" v-show="_showMapBox">
        <div class="mapBox-1 pbtn" :style="[
          { backgroundImage: `url(/imgs/menu/${mapIndex == 2 ? 'mapBg-1' : 'mapBg-1-1'}.png)` }
        ]" @click="runToBuild('2#', 2)"></div>
        <div class="mapBox-2 pbtn" :style="[
          { backgroundImage: `url(/imgs/menu/${mapIndex == 3 ? 'mapBg-2' : 'mapBg-2-1'}.png)` }
        ]" @click="runToBuild('3#', 3)"></div>
        <div class="mapBox-3 pbtn" :style="[
          { backgroundImage: `url(/imgs/menu/${mapIndex == 1 ? 'mapBg-3' : 'mapBg-3-1'}.png)` }
        ]" @click="runToBuild('1#', 1)"></div>
      </div>

      <!-- <div class="bg_dianxuan" :class="[pgShow ? '' : 'hide']">
        <el-tooltip content="点选" placement="right" effect="light">
          <div class="dxBox pbtn" @click="">
            <i style="background-image: url('/imgs/menu/点选.png')"></i>
            <p>点选</p>
          </div>
        </el-tooltip>
        <el-tooltip content="线选" placement="right" effect="light">
          <div class="dxBox pbtn" @click="hEnableRule()">
            <i style="background-image: url('/imgs/menu/线选.png')"></i>
            <p>线选</p>
          </div>
        </el-tooltip>
        <el-tooltip content="框选" placement="right" effect="light">
          <div class="dxBox pbtn" @click="hEnableSelBox()">
            <i style="background-image: url('/imgs/menu/框选.png')"></i>
            <p>框选</p>
          </div>
        </el-tooltip>
      </div> -->

      <ul>
        <li v-for="(item, index) in menuList" :key="item.name" @click="clickMenu(item, index)">
          <div class="cicleBg pbtn" :class="[item.state ? 'cicleBgActive' : '']">
            <i :style="[{ backgroundImage: `url(/imgs/menu/${item.name}.png)` }]"></i>
            <p>{{ item.name }}</p>
          </div>
        </li>
      </ul>
    </div>
    <div class="select-box" ref="_selectBox" :style="_styleSelbox"></div>
    <div class="local-cam-points">
      <div v-for="cam in _localCmas" :style="['top:' + cam.pos.y + 'px;', 'left:' + cam.pos.x + 'px;']">
        {{ cam.id }}
      </div>
    </div>
    <!-- 漫游 -->
    <el-scene-roaming ref="roami"> </el-scene-roaming>

    <!-- 场景飞行 -->
    <el-scene-fly ref="scene_fly"></el-scene-fly>
  </div>
</template>

<script setup>
import useWebSocket from '@/utils/WebSocket'
import elSceneFly from './el-scene-fly.vue'
import elSceneRoaming from './el-scene-roaming.vue'
import { computed, reactive, nextTick, onMounted, onUnmounted, ref, watch, toRefs } from 'vue'
import router from '@/router'
import { useStore } from 'vuex'
// import { fa } from "element-plus/es/locale";
const store = useStore()
const dat_opacity = ref(0)
const dat_opacity_db = ref(0)
const scene_fly = ref(null)
const {
  pgShow,
  datFlos,
  isBuild,
  scene3d,
  _enable,
  alarmBox,
  websocketData,
  _showIcons,
  isDoneScene
} = toRefs(store.state)

const _isIndex = computed(() => store.state.pgCurrent == 'index')
const radio = ref(3)
const settingForm = ref([
  {
    name: '画质设置',
    state: false
  },
  {
    name: '登录设置',
    state: false
  },
  {
    name: '其他设置',
    state: false
  }
])

const eventTypeForm = ref({
  327937: '布防',
  327938: '撤防',
  327939: '旁路',
  327940: '旁路恢复',
  327941: '消警',
  327681: '报警'
})
const roami = ref(null)
const _selectBox = ref(null)
const _styleSelbox = ref('')
const _boxPos = ref('')

const _localCmas = ref([])

const _showMap = ref(false)
const _showGuanLu = ref(false)
const _showPD = ref(false)

const _showBase = ref(false)

const _tranClick = ref(false)

const _isLoadDat = ref(false)
const isSetRLT = ref(false)
// const props = defineProps({
//   _changed: {
//     type: Function
//   }
// })

const isHideTree = ref(true)
//隐藏绿化
const _showZS = ref(false)
const _showDX = ref(false)
const _showPz = ref(false)

const menuIndex = ref(0)
const menuList = ref([
  {
    name: '总览',
    state: false
  },
  {
    name: '全屏',
    state: false
  },
  // {
  //   name: '地图',
  //   state: false
  // },
  {
    name: '展示',
    state: false
  },
  // {
  //   name: '点选',
  //   state: false
  // },
  {
    name: '配置',
    state: false
  }
])
const zhanshiList = ref([
  // {
  //   name: '透视',
  //   state: false
  // },
  // {
  //   name: '飞行',
  //   state: false
  // },
  {
    name: '标签',
    state: false
  },
  {
    name: '绿化',
    state: false
  },
  {
    name: '2D3D',
    state: false
  },
  {
    name: '漫游',
    state: false
  },
  {
    name: '周边',
    state: false
  }
])
const hEmits = defineEmits(["onCall", "callUnity"]);
const hCall = (h, d, b) => {
  hEmits("onCall", h, d, b);
};

//模板化调用，场景模块
const hCallModuleScene = (h, d) => {
  hCall("CallScene", {
    h: h,
    dat: d
  });
}
const isFullScreen = ref(false)
function hSetFullScreen() {
  var dom = document
  isFullScreen.value =
    dom.fullscreenElement || dom.mozFullScreenElement || dom.webkitFullscreenElement

  if (isFullScreen.value) {
    hExitFullscreen()
  } else {
    hFullScreen()
  }
}

function hFullScreen() {
  var element = document.body
  if (element.requestFullscreen) {
    element.requestFullscreen()
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen()
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen()
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen()
  }
}

function hExitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen()
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen()
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen()
  }
}

const settingIndex = ref(0)
const clickSetting = (item, index) => {
  settingIndex.value = index
}

const editLogin = () => {
  // isDoneScene.value = false
  router.push('/login')
  localStorage.clear()
},
  routerToMh = () => {
    router.push('/gateway')
  }
const _showMapBox = ref(false)
const clickMenu = (item, index) => {
  // 设置当前菜单项的索引
  menuList.value[index].state = !menuList.value[index].state
  if (item.name === '总览') {
    hToMainScene()
  }
  // 如果当前菜单项是全屏，则调用全屏方法
  if (item.name === '全屏') {
    pgShow.value = !pgShow.value
  }
  // 如果当前菜单项是展示，则切换展示状态
  if (item.name === '展示') {
    _showZS.value = !_showZS.value
  }
  if (item.name === '点选') {
    _showDX.value = !_showDX.value
  }
  if (item.name === '配置') {
    _showPz.value = !_showPz.value
  }
  if (item.name === '地图') {
    _showMapBox.value = !_showMapBox.value
  }
}

const labelState = ref(false),
  isHide3D = ref(false),
  isHideZB = ref(false)
const clickZsMenu = (item, index) => {
  if (item.name === '透视') {
  }
  if (item.name === '飞行') {
    hEnableDaoLan()
  }
  if (item.name === '标签') {
    labelState.value = !labelState.value
    window.s3d.SetModIconState({
      enable: labelState.value,
      typeId: 1,
      modelType: -1
    })
  }
  if (item.name === '绿化') {
    isHideTree.value = !isHideTree.value
    window.s3d.SetTreeState(isHideTree.value)
  }
  if (item.name === '2D3D') {
    isHide3D.value = !isHide3D.value
    window.s3d.SetCamFlat(isHide3D.value)
  }
  if (item.name === '漫游') {
    hEnableRoami(true)
  }
  if (item.name === '周边') {
    window.s3d.SetPeiLouState(isHideZB.value)
    isHideZB.value = !isHideZB.value
  }
}

const _enableSelectBox = ref(false)
const hEnableSelBox = () => {
  _enableSelectBox.value = !_enableSelectBox.value
  var v = _enableSelectBox.value
  if (v) {
    _selectBox.value.style = 'display:block;'
    document.addEventListener('mousedown', hBoxDown, false)
    hCheckBack([])
  } else {
    _selectBox.value.style = 'display:none;'
    document.removeEventListener('mousemove', hBoxMove, false)
    document.removeEventListener('mouseup', hBoxUp, false)
  }
}
const t = ref(0)
const hCheckBack = (localcams) => {
  if (localcams.length == 0) {
    _localCmas.value = []
  }
  var d = Date.now()

  if (d - t.value >= 500) {
    t.value = d
  } else {
    return
  }

  _localCmas.value = localcams
  //console.log("cams", localcams)
}

const hBoxDown = (e) => {
  window.s3d.SetCamSelect()

  document.removeEventListener('mousedown', hBoxDown, false)
  document.addEventListener('mousemove', hBoxMove, false)
  document.addEventListener('mouseup', hBoxUp, false)
  _boxPos.value = {
    x: e.clientX - 4,
    y: e.clientY - 4
  } // ``;
  var pos = _boxPos.value
  _styleSelbox.value = `top:${pos.y}px;left:${pos.x}px; 
		width:86px;height:86px;`
  console.log('hBoxDown 框选。', _styleSelbox.value)
  //return false;
  window.s3d.SetCamSelect()
}
const hBoxMove = (e) => {
  if (e.buttons == 0 || !_enableSelectBox.value) {
    document.removeEventListener('mousemove', hBoxMove, false)
  }
  if (!_enableSelectBox.value) {
    hBoxUp(e)
    return
  }
  var pos = _boxPos.value

  let y = pos.y
  let x = pos.x
  let w = e.clientX - x + 4
  let h = e.clientY - y + 4

  _styleSelbox.value = `top:${y}px;left:${x}px;width:${w}px;height:${h}px;`

  //console.log(e.buttons + "  框选。size", _styleSelbox.value);
}

//框选
const hBoxUp = (e) => {
  if (typeof window.hCheckInCam != 'undefined') {
    window.hCheckInCam(_selectBox.value)
  }
  hEnableSelBox()
}

//场景漫游
const hEnableRoami = (v) => {
  roami.value.hBegin(v)
}

//场景飞行
const hEnableDaoLan = () => {
  console.log('飞行')
  scene_fly.value.hBegin()
}

//测量
const rule = ref(false)
const hEnableRule = () => {
  rule.value = !rule.value
  window.s3d.SetRule(rule.value)
}
const mapIndex = ref(0)
const runToBuild = (bname, index) => {
  console.log('runToBuild', bname, index)
  mapIndex.value = index
  window.s3d.SetBuild(bname)
}

const hToMainScene = () => {
  hCallModuleScene("SetCurrentBuild", "");

  // store.state.isBuild = false
  // isSetRLT.value = false
  // window.s3d.SetPDRoomHeatMap(isSetRLT.value)
  // // props._changed()
  // window.s3d.SetToHome()
  // window.s3d.SetOpacity(0)
  // //window.s3d.SetDianMianOpacity(0);
  // // sendMessagToD('home')
  // _isHideDB.value = false
  // isHideTree.value = true
  // isHideBuild.value = true
  // isHideDiMian.value = true
  // isHideXHS.value = false
  // isHideSZ.value = false
  // isHideJS.value = false
  // isHideGLTX.value = false
  // isSetRLT.value = false
  // _tranClick.value = false
  // _showPD.value = false
  // _showGuanLu.value = false
  // _isLoadDat.value = false
  // _showMap.value = false
  // roomLit.value.map((t) => {
  //   t.isclick = false
  // })
  // window.s3d.SetTreeState(isHideTree.value)

  // setTimeout(() => {
  //   window.s3d.SetUpdateModPos()

  //   window.s3d.DeviceRelPosEnable({
  //     enable: false,
  //     typeId: 72,
  //     modelType: 340
  //   })
  // }, 800)
}
onMounted(() => {
  useWebSocket('ws://192.168.1.116:8096/api/SetDat/GetNotReadCount')
  document.addEventListener('fullscreenchange', () => {
    isFullScreen.value = !isFullScreen.value
  })
})
</script>

<style lang="scss" scoped>
.menuBox {
  ul {
    display: flex;
  }

  li {
    width: 67px;
    height: 69px;
    margin: 0 21px;

    i {
      width: 35px;
      height: 35px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
    }

    p {
      position: absolute;
      top: -25px;
    }
  }
}

.alarm {
  background-image: url(/imgs/menu/boxBg.png);
  width: 516px;
  height: 272px;
  z-index: 101;
  position: absolute;
  bottom: 400px;
  left: 160px;
  display: flex;
  align-items: center;

  .ala_title {
    font-family: FZCuYuan-M03S;
    font-weight: 400;
    font-size: 30px;
    color: #fefefe;
    position: absolute;
    top: 18px;
    left: 198px;
  }

  .ala_close {
    background-image: url(/imgs/menu/closeIcon.png);
    width: 23px;
    height: 18px;
    position: absolute;
    top: 16px;
    right: 26px;
  }

  ul {
    padding: 10px 40px;

    li {
      display: flex;
      align-items: center;
      margin: 20px 0;

      i {
        width: 19px;
        height: 19px;
        background-image: url(/imgs/menu/red_icon.png);
      }

      p {
        margin-left: 10px;
        white-space: nowrap;
      }
    }
  }
}

.settingMb {
  position: absolute;
  background-image: url(/imgs/menu/boxBg-1.png);
  width: 290px;
  height: 314px;
  top: -430px;
  right: -190px;
  // display: flex;

  .settingMb-title {
    font-family: FZCuYuan-M03S;
    font-weight: 400;
    font-size: 17px;
    color: #636363;
    /* margin: 0 auto; */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 54px;
  }

  .settingMb-menu {
    display: flex;
    position: relative;
    // top: 36px;
    margin: 0 22px;

    span {
      background-image: url(/imgs/menu/boxBg-1-1.png);
      width: 82px;
      height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;

      p {
        font-family: FZCuYuan-M03S;
        font-weight: 400;
        font-size: 14px;
        color: #636363;
      }
    }
  }

  .settingMb-box {
    position: relative;
    width: 259px;
    height: 214px;
    /* background: #c2d0e0; */
    /* box-shadow: 0px 0px 38px 0px rgba(83, 101, 134, 0.3); */
    border-radius: 6px;
    margin: 0 auto;

    .settingMb-HZ {
      width: 50%;
      height: 100%;
      margin: 40px auto;
    }

    .settingMb-box-title {
      font-family: FZCuYuan-M03S;
      font-weight: 400;
      font-size: 18px;
      color: #6d7d8c;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100px;
    }

    .settingMb-box-btn {
      width: 137px;
      height: 31px;
      background: linear-gradient(180deg, rgba(192, 208, 220, 0.58), rgba(255, 255, 255, 0.58));
      border-radius: 8px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10px auto;

      p {
        font-family: FZCuYuan-M03S;
        font-weight: 400;
        font-size: 15px;
        color: #636363;
      }
    }
  }
}

.mapBox {
  position: absolute;
  background-image: url(/imgs/menu/mapBg.png);
  width: 290px;
  height: 215px;
  top: -270px;
  right: 120px;

  .mapBox-1 {
    position: absolute;
    background-image: url(/imgs/menu/mapBg-1-1.png);
    width: 68px;
    height: 121px;
    left: 30px;
    bottom: 33px;
  }

  .mapBox-2 {
    position: absolute;
    background-image: url(/imgs/menu/mapBg-2-1.png);
    width: 61px;
    height: 58px;
    right: 59px;
    top: 27px;
  }

  .mapBox-3 {
    position: absolute;
    background-image: url(/imgs/menu/mapBg-3-1.png);
    width: 101px;
    height: 69px;
    right: 22px;
    bottom: 67px;
  }
}

.cicleBg {
  background-image: url(/imgs/menu/bg.png);
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cicleBgActive {
  background-image: url(/imgs/menu/Cbg.png);
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cicleBg:hover {
  background-image: url(/imgs/menu/Cbg.png);
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg_dianxuan {
  bottom: 150px;
  left: -170px;
  position: absolute;
  display: flex;
  flex-direction: column;
  transition: all 0.5s;
}

.bg_dianxuan.hide {
  left: -600px;
}

.dxBox {
  background-image: url(/imgs/menu/bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 10px 8px;

  i {
    width: 36px;
    height: 36px;
    //   margin: 0 auto;
    //   margin-top: 20px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  p {
    position: absolute;
    top: -25px;
  }
}

.pbtn:hover {
  opacity: 0.8;
}

.bg_zhanshi {
  position: absolute;
  bottom: 150px;
  left: -40px;
  background-image: url(/imgs/menu/bg_zhanshi.png);
  width: 455px;
  height: 78px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  justify-content: space-around;
  align-items: center;
  // transition: opacity 0.5s;
  // opacity: 0;
}

.zsBox {
  display: flex;
  flex-direction: column;
  align-items: center;

  i {
    width: 33px;
    height: 33px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  p {
    font-family: FZCuYuan-M03S;
    font-weight: 400;
    font-size: 14px;
    color: #5a7eba;
  }
}

.select-box {
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  position: absolute;
  border: 1px solid #db0000;
  background: rgba(12, 84, 152, 0.3);
  box-shadow: inset 0px 0px 6px #eee;
  z-index: 2000;

  /* 可变大小 */
  resize: both;
  overflow: auto;
}

.local-cam-points {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.local-cam-points>div {
  position: absolute;
  background-color: #2f2f2fed;
  padding: 3px;
  border-radius: 3px;
}
</style>
